.page {
  position: absolute;
  top: 0px;
  height: calc(100vh - 52px);
  width: 100vw;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .top {
    position: relative;
    flex-shrink: 0;
    img {
      width: 100%;
    }
    .searchBox {
      position: absolute;
      top: 15px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 340px;
      height: 47px;
      padding: 0px 15px;
      box-sizing: border-box;
      margin: 0 auto;
      border-radius: 4px;
      background-color: rgba(44, 82, 138, 0.4);
      border: 1px solid rgba(217, 217, 217, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 17px;

      > input {
        position: relative;
        background: none;
        outline: none;
        border: none;
        width: 80%;
        color: #ffffff;
        &::-webkit-input-placeholder {
          color: #fff;
        }
        &::-moz-input-placeholder {
          color: #fff;
        }
        &::-ms-input-placeholder {
          color: #fff;
        }
      }

      > img {
        position: relative;
        width: 20px;
        max-height: 20px;
      }
    }
  }
  .bottom {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    .list {
      padding: 10px;
      .item {
        display: flex;
        flex-direction: column;
        .img {
          width: 345px;
          height: 173px;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .des {
          display: flex;
          justify-content: space-between;
          padding: 15px 0;
          padding-right: 10px;
          > div:nth-child(1) {
            img {
              width: 25px;
              margin-right: 10px;
            }
          }
          > div:nth-child(2) {
            color: rgba(50, 99, 165, 1);
          }
        }
      }
    }
  }
}
